<template>
  <div id="container"></div>
</template>

<script>
import { Graph } from "@antv/g6";
export default {
  name: "Start",
  components: {},
  data() {
    return {};
  },
  mounted() {
    // 定义数据源
    const data = {
      // 点集
      nodes: [
        {
          id: "node-1",
          style: { x: 50, y: 100 },
        },
        {
          id: "node-2",
          style: { x: 150, y: 100 },
        },
      ],
      // 边集
      edges: [
        // 表示一条从 node1 节点连接到 node2 节点的边
        { id: "edge-1", source: "node-1", target: "node-2" },
      ],
    };

    // 创建 G6 图实例
    const graph = new Graph({
      container: document.getElementById("container"), // 指定图画布的容器 id，与第 9 行的容器对应
      // 画布宽高
      width: 800,
      height: 500,
    });
    // 读取数据
    graph.data(data);
    // 渲染图
    graph.render();
  },
};
</script>
